<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        .emp-content {
            background-color: white;
            border-radius: 5px;
        }
    </style>

</head>
<body>
<div class="emp-content">
    <form class="layui-form layui-form-pane" id="form-search">
        <fieldset class="table-search-fieldset">
            <legend>搜索条件</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">员工姓名</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" name="startDate" placeholder="开始日期" autocomplete="off" class="layui-input date">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" name="endDate" placeholder="结束日期" autocomplete="off" class="layui-input date">
                    </div>
                </div>

                <div class="layui-inline">
                    <button id="btn-search" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal">
                        <i class="layui-icon layui-icon-search"></i>
                        搜索
                    </button>
                    <button id="btn-reset"  type="reset" class="layui-btn layui-btn-radius layui-btn-primary">
                        <i class="layui-icon layui-icon-fonts-clear"></i>
                        清空条件
                    </button>
                </div>
            </div>
        </fieldset>

    </form>
    <table id="table-emp" lay-filter="table-emp-filter"></table>
</div>
<!-- 对应表格字段进行转换的操作 -->
<script type="text/html" id="convertSex">
    {{#
        if(d.sex == 'M'){
            return '男';
        }else if(d.sex == 'F'){
            return '女';
        }else{
            return '妖'
        }
    }}
</script>

<!-- 对对应部门字段进行转换的操作-->
<script type="text/html" id="convertDept">
    {{#
        return d.dept.deptName;
    }}
</script>

<script type="text/html" id="col-emp-toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="table-emp-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    </div>
</script>

<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js?v=2.0.0}" charset="utf-8"></script>
<script th:inline="javascript">

    function refreshTable() {
        $("#btn-search").click(); // 对页面进行刷新
        $("#btn-reset").click(); // 将查询表单进行重置
    }

    layui.use(["laydate","table","form"],function(){

        var laydate = layui.laydate;// 中文日期
        var table = layui.table // 表格
        var form = layui.form; // 表单

        // 表格头部工具栏监听
        table.on('toolbar(table-emp-filter)', function(obj){
            if (obj.event === 'add') {
                layer.open({
                    type: 2,
                    title: '新增员工',
                    content: '/emp/add/ui',
                    area: ['100%', '100%'],
                    shadeClose: false // 点击周围未覆盖区域，会直接退出
                });
            } else if (obj.event === 'delete') {
                var checkStatus = table.checkStatus('table-emp'); // 获取选中行数据
                if (checkStatus.data.length === 0) {
                    layer.alert("您没有选中任何数据",{icon: 2,anim: 6,title: "提示"})
                    return false;
                }
                var ids = new Array()
                $(checkStatus.data).each(function () { // 遍历选中行数据
                    ids.push(this.empId) // 将选中行的empId添加到数组中
                })

                layer.confirm('确定要删除选中的数据吗？', {icon: 3, title: '确认删除'}, function (index) {
                    var url = "/emp/" + ids.join(",")
                    var params = {
                        _method: "DELETE",
                    }

                    $.post(url, params, function (response) {
                        if (response.code === 0) { // 成功
                            layer.msg(response.message,{icon: 1}) // 弹出成功提示信息
                            refreshTable() // 刷新页面
                        } else {
                            layer.msg(response.message,{icon: 2,anim: 6}) // 弹出失败提示信息
                        }
                    })

                    layer.close(index)
                })
            }
        });


        // 渲染
        laydate.render({
            elem: '.date'
        });

        table.render({
            elem: '#table-emp'
            ,url: '/emp/list' //数据接口
            ,page: true //开启分页
            ,toolbar: '#table-emp-toolbar'
            ,limits: [5,10,30,50,100]
            ,cols: [[ //表头
                {type: "checkbox",width:60},
                {field: 'empId', title: '员工编号', width:120, sort: true,align: 'center'}
                ,{field: 'name', title: '姓名', width:140,align: 'center'}
                ,{field: 'sex', title: '性别', width:80, sort: true,align: 'center',templet: "#convertSex"}
                ,{field: 'age', title: '年龄', width:80,align: 'center'}
                ,{field: 'sal', title: '工资', width: 120,align: 'right'}
                ,{field: 'dept', title: '部门', width: 140, sort: true,align: 'center',templet: "#convertDept"}
                ,{field: 'birthday', title: '生日', width:120, sort: true,align: 'center'}
                ,{field: 'address', title: '家庭住址'}
                ,{title: '操作', width: 150,toolbar: '#col-emp-toolbar'}
            ]]
        });

        form.on('submit(btn-search-filter)', function(data) {
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            table.reload('table-emp', {
                where: { //设定异步数据接口的额外参数，任意设
                    name: data.field.name,
                    startDate: data.field.startDate,
                    endDate: data.field.endDate
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });

            return false // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        
        table.on("tool(table-emp-filter)",function (obj) {
            var data = obj.data; // 当前行数据
            var layEvent = obj.event; // lay-event 对应的值

            if (layEvent === "del") { // 删除
                layer.confirm('确定要删除选中的' + data.name + '吗？', {icon: 3, title: '确认删除'}, function (index) {
                    var url = "/emp/" + data.empId
                    var params = {
                        _method: "DELETE",
                    }

                    $.post(url, params, function (response) {
                        if (response.code === 0) { // 成功
                            layer.msg(response.message,{icon: 1}) // 弹出成功提示信息
                            refreshTable() // 刷新页面
                        } else {
                            layer.msg(response.message,{icon: 2,anim: 6}) // 弹出失败提示信息
                        }
                    })

                    layer.close(index)
                })
            } else if (layEvent === "edit") { // 编辑
                layer.open({
                    type: 2,
                    title: '修改员工',
                    content: '/emp/' + data.empId,
                    area: ['100%', '100%'],
                    shadeClose: false // 点击周围未覆盖区域，会直接退出
                });

            }


        })


    });
</script>
</body>
</html>